<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head><title>新建 - 其它缺陷管理 - 管体缺陷</title><link rel="stylesheet" href="${pageContext.request.contextPath}/static/js/plugin/datetimepicker/jquery.datetimepicker.min.css"></head>
<body>
    <!-- content-body -->
    <div class="main-inner">
        <form id="JQ_create_form">
        <div class="content-inner">
            <div class="meta-head">
                <h3><i class="zy-sunshang-icon"></i>其它缺陷管理 <i class="zy-url-arrow"></i> 新建</h3>
            </div>
            <div class="zy-form-line">
                <hr>
            </div>
            <div class="zy-form-line">
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta"><i class="zy-requird-icon"></i>管道名称</div>
                    <div class="zy-select-inner">
                        <blockquote id="JQ_pipeline" class="bk-select zy-verify" data-verify="{required:true,title:'管道名称'}">
                            <abbr></abbr>
                        </blockquote>
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta">缺陷编号</div>
                    <div class="zy-input-inner">
                        <input id="JQ_code" type="text" class="zy-i-input" maxlength="80" autocomplete="off">
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-group w-48">
                        <div class="zy-input-meta"><i class="zy-requird-icon"></i>缺陷类型</div>
                        <div class="zy-select-inner">
                            <blockquote id="JQ_class" class="bk-select zy-verify" data-verify="{required:true,title:'缺陷类型'}"></blockquote>
                        </div>
                    </div>
                    <div class="zy-sp"></div>
                    <div class="zy-input-group w-48">
                        <div class="zy-input-meta"><i class="zy-requird-icon"></i>缺陷子类型</div>
                        <div class="zy-select-inner">
                            <blockquote id="JQ_type" class="bk-select"></blockquote>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="zy-form-line">
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta"><i class="zy-requird-icon"></i>缺陷来源</div>
                    <div class="zy-select-inner">
                        <blockquote id="JQ_source" class="bk-select zy-verify" data-verify="{required:true,title:'缺陷来源'}"></blockquote>
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta"><i class="zy-requird-icon"></i>修复方法</div>
                    <div class="zy-select-inner">
                        <div id="JQ_repair_hidden_data" class="hidden"><c:forEach items="${repairMethods}" var="r">{"id":"${r.ID}","text":"${r.NAME}"},</c:forEach></div>
                        <blockquote class="bk-select zy-verify" id="JQ_repair" data-holder="true" data-verify="{required:true,title:'修复方法'}"></blockquote>
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta"><i class="zy-requird-icon"></i>发现时间</div>
                    <div class="zy-input-inner">
                        <input id="JQ_date" type="text" class="zy-i-input zy-i-input-date-0 zy-verify" data-verify="{required:true,title:'发现时间'}" autocomplete="off">
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="zy-form-line">
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta">缺陷尺寸(长)</div>
                    <div class="zy-input-inner">
                        <input id="JQ_length" type="text" class="zy-i-input zy-verify w-90" data-verify="{type:'plus',title:'长'}" autocomplete="off">
                        <label class="zy-i-label w-10">mm</label>
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta">缺陷尺寸(宽)</div>
                    <div class="zy-input-inner">
                        <input id="JQ_width" type="text" class="zy-i-input zy-verify w-90" data-verify="{type:'plus',title:'宽'}" autocomplete="off">
                        <label class="zy-i-label w-10">mm</label>
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta">深度</div>
                    <div class="zy-input-inner">
                        <input id="JQ_depth" type="text" class="zy-i-input zy-verify w-90" data-verify="{type:'number',range:[0,10000],round:1,title:'深度'}" autocomplete="off">
                        <label class="zy-i-label w-10">mm</label>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="zy-form-line">
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta"><i class="zy-requird-icon"></i>坐标位置(x)</div>
                    <div class="zy-input-inner">
                        <input id="JQ_x" type="text" class="zy-i-input zy-verify" data-verify="{required:true,type:'number',range:[0,999999999],round:4,title:'坐标位置(x)'}" autocomplete="off">
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta"><i class="zy-requird-icon"></i>坐标位置(y)</div>
                    <div class="zy-input-inner">
                        <input id="JQ_y" type="text" class="zy-i-input zy-verify" data-verify="{required:true,type:'number',range:[0,999999999],round:4,title:'坐标位置(y)'}" autocomplete="off">
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta"><i class="zy-requird-icon"></i>坐标位置(z)</div>
                    <div class="zy-input-inner">
                        <input id="JQ_z" type="text" class="zy-i-input zy-verify" data-verify="{required:true,type:'number',range:[0,999999999],round:4,title:'坐标位置(z)'}" autocomplete="off">
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="zy-form-line">
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta">埋深</div>
                    <div class="zy-input-inner">
                        <input id="JQ_buriedDepth" type="text" class="zy-i-input zy-verify w-90" data-verify="{type:'number',round:2,title:'埋深'}" autocomplete="off">
                        <label class="zy-i-label w-10">m</label>
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta">时钟位置</div>
                    <div class="zy-input-inner">
                        <input id="JQ_clock" type="text" class="zy-i-input w-85" maxlength="5" autocomplete="off" readonly="readonly">
                        <label class="zy-i-label w-15">h:min</label>
                    </div>
                </div>
                <div class="zy-sp"></div>
                <div class="zy-input-group w-31">
                    <div class="zy-input-meta"><i class="zy-requird-icon"></i>绝对距离</div>
                    <div class="zy-input-inner disabled">
                        <input id="JQ_enterMileage" type="text" class="zy-i-input zy-verify w-90" data-verify="{type:'number',round:3,title:'绝对距离'}" autocomplete="off" disabled="disabled">
                        <label class="zy-i-label w-10">m</label>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="zy-form-line">
                <div class="zy-input-group w-65">
                    <div class="zy-input-meta">备注</div>
                    <div class="zy-textarea-inner">
                        <textarea id="JQ_create_mark" class="zy-textarea w-100" maxlength="150" autocomplete="off"></textarea>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="zy-form-line">
                <div class="zy-input-group w-100">
                    <div class="zy-input-meta">照片</div>
                    <div class="zy-picture-inner">
                        <div class="zy-picture-line">
                            <span class="zy-pic-title">拍照上传：</span>
                            <label class="zy-noninternal-upload-label"></label>
                            <button class="zy-noninternal-upload-button" type="button" data-type="UPLOAD_IMAGE" data-count="0">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="zy-form-line t-r">
                <button id="JQ_create_submit" class="zy-button zy-submit" type="button"><i class="zy-submit-icon"></i>提交</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="JQ_create_goback" class="zy-button zy-goback" type="button"><i class="zy-goback-icon"></i>返回</button>
            </div>
        </div>
        </form>
    </div>
    <!-- gis service address -->
    <input id="JQ_gis_service" name="gis_service" value="${gisServicePath}" type="hidden">
    <!-- plugin -->
    <script src="${pageContext.request.contextPath}/static/js/plugin/datetimepicker/jquery.datetimepicker.full.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/plugin/plupload/plupload.full.min.js"></script>
    <!-- ui -->
    <script src="${pageContext.request.contextPath}/static/js/ui/ui-main.js"></script>
    <!-- base -->
    <script src="${pageContext.request.contextPath}/static/js/controller/base/base.controller.js"></script>
    <!-- api -->
    <script src="${pageContext.request.contextPath}/static/js/controller/api/defect.api.js"></script>
    <!-- controller -->
    <script src="${pageContext.request.contextPath}/static/js/controller/defect/noninternal/noninternalCreate.controller.js"></script>
    <!-- gis js -->
    <script src="${gisApiPath}"></script>
    <script type="text/javascript">
        require([
            "esri/tasks/query", "esri/tasks/QueryTask",
            "dojo/domReady!"
        ], function (Query, QueryTask) {
            /*
             1、首先去获取该点所在管线的PIPE_LINE_ID，
             2、PIC_PIPE_MAP_CENTER_LINE表中查找对应管道ID的gisID
             3、获取该点的X坐标
             4、获取该点的Y坐标
             */
            function getMileage(lineGisId, ptX, ptY) {
                esri.config.defaults.io.proxyUrl = "${gisResourcePath}/proxy.jsp";
                esri.config.defaults.io.alwaysUseProxy = true;
                //管道中心线服务
                var url = document.getElementById('JQ_gis_service').value;
                //var url = "http://192.168.2.56:6080/arcgis/rest/services/pxs/dypipeline/MapServer/26";//可配置
                var query = new esri.tasks.Query();
                query.where = "SDE.pic_pipe_pipeline_g.ID_='" + lineGisId + "'";
                query.returnGeometry = true;
                query.outFields = ["*"];
                var queryTask = new esri.tasks.QueryTask(url);
                queryTask.execute(query, function (graphics) {
                    var mileage = 0;
                    var date1 = new Date();
                    if (graphics.features.length > 0) {
                        var polyline = graphics.features[0].geometry;
                        var linePath = polyline.paths[0];
                        var segementsInfo = [];
                        var pt = [ptX, ptY];
                        var nearestDist = -1;   //记录距离线段最近的距离
                        var nearestInfo;//记录记录线段最近点的信息，包括坐标信息、到线上最近的点、线上最近的点距离所在线段起点的距离
                        var minIndex = 0;
                        for (var i = 0; i < linePath.length - 1; i++) {
                            var tmpJson = queryNearestPt(pt, linePath[i], linePath[i + 1]);
                            if (0 == i) {
                                nearestDist = tmpJson.minDistance;
                                nearestInfo = tmpJson;
                            }
                            segementsInfo.push(tmpJson);
                            if (nearestDist > tmpJson.minDistance) {
                                nearestDist = tmpJson.minDistance;
                                nearestInfo = tmpJson;
                                minIndex = i;
                            }
                        }
                        for (var j = 0; j < minIndex; j++) {
                            mileage = mileage + getLength(linePath[j], linePath[j + 1]);
                        }
                        //mileage = mileage + nearestInfo.minDistance;
                        mileage = mileage + nearestInfo.sgMileage;
                    } else {
                        mileage = 0;  //等于0的情况，说明数据库中不存在该管道中心线或查询出错。
                    }
                    var date2 = new Date();
                    var t = Math.floor((date2 - date1) / 1000);
                    document.getElementById('JQ_enterMileage').value = mileage.toFixed(3);
                }, function (error) {
                    //console.log("查询出错，请稍后重试！");
                    //console.log(error);
                    mileage = 0;
                });
            }

            //把点放到线上。
            //求点到线段上最近点。
            function queryNearestPt(point, linePoint1, linePoint2) {
                var pt = [];
                var arryX = [linePoint1[0], linePoint2[0]];
                var arryY = [linePoint1[1], linePoint2[1]];
                var minX = getMinValue(arryX);
                var maxX = getMaxValue(arryX);
                var minY = getMinValue(arryY);
                var maxY = getMaxValue(arryY);
                //斜率为不存在的情况
                if (linePoint1[0] == linePoint2[0]) {
                    var tmpX = linePoint1[0];
                    var tmpY;
                    if (point[1] >= minY && point[1] <= maxY) {
                        tmpY = point[1];
                    } else if (point[1] < minY) {
                        tmpY = minY;
                    } else if (point[1] > maxY) {
                        tmpY = maxY;
                    }

                    var pt = [tmpX, tmpY];
                } else {
                    //斜率
                    var k = Math.abs((linePoint2[1] - linePoint1[1])
                            / (linePoint2[0] - linePoint1[0]));

                    if (k == 0) {
                        //斜率为0
                        var x = minX;
                        if (point[0] >= minX && point[0] <= maxX) {
                            x = point[0];
                        } else if (point[0] < minX) {
                            x = minX;
                        } else if (point[0] > maxX) {
                            x = maxX;
                        }
                        var y = linePoint1[1];
                        pt = [x, y];
                    } else {
                        var x = (k * linePoint1[0] + point[0] / k + point[1] - linePoint1[1])
                                / (1 / k + k);
                        var y = -1 / k * (x - point[0]) + point[1];
                        if (minX < x && point[0] < maxX && minY < y && y < maxY) {
                            //如果点在线段上
                            pt = [x, y];
                        } else {
                            //找到距离xy最近的端点
                            var length1 = getLength(point, linePoint1);
                            var length2 = getLength(point, linePoint2);

                            if (length1 > length2) {
                                pt = linePoint2;
                            } else {
                                pt = linePoint1;
                            }
                        }
                    }
                }

                var length = getLength(point, pt);
                var sgMileage = getLength(linePoint1, pt);//距离该线段的距离
                var resJson = {
                    minDistance: length,//点到线的最短距离
                    nearestPt: pt, //到线段上最近的点
                    sgMileage: sgMileage, //距离该点段起点的距离
                    lineStartPt: linePoint1//该线段起点的坐标。
                };
                return resJson;
            }

            //求两点距离
            function getLength(point1, point2) {
                var xdiff = (point2[0] - point1[0]);
                var ydiff = (point2[1] - point1[1]);

                return Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
            }

            //获取数组最小值
            function getMinValue(values) {
                var minValue = 999999999999999;
                for (var i = 0; i < values.length; i++) {
                    if (values[i] < minValue)
                        minValue = values[i];
                }

                return minValue;
            }

            //获取数组最大值
            function getMaxValue(values) {
                var maxValue = -999999999999999;
                for (var i = 0; i < values.length; i++) {
                    if (values[i] > maxValue)
                        maxValue = values[i];
                }
                return maxValue;
            }

            // 获得GIS id
            function getGISID(x,y){
                var v1 = x.val();
                var v2 = y.val();
                if(v1 && v2){
                    var lineId = $('#JQ_pipeline').data('value');
                    if(lineId){
                        DyyBase.ajax(DyyBase.url_noninternal_get_gisid(),{lineId:lineId},function(dataset){
                            if(dataset.bool){
                                //console.log(dataset.result.gisId, v1, v2);
                                getMileage(dataset.result.gisId, v1, v2);
                            }
                        });
                    }
                }
            }

            // x 坐标
            $('#JQ_x').blur(function(){
                var v1 = $.trim($(this).val());
                if(v1){
                    if($.isNumeric(v1)){
                        getGISID($('#JQ_x'),$('#JQ_y'));
                    }else{
                        $(this).TIP({
                            content: 'x应为数字！'
                        });
                    }
                }
            });

            // y 坐标
            $('#JQ_y').blur(function(){
                var v1 = $.trim($(this).val());
                if(v1){
                    if($.isNumeric(v1)){
                        getGISID($('#JQ_x'),$('#JQ_y'));
                    }else{
                        $(this).TIP({
                            content: 'y应为数字！'
                        });
                    }
                }
            });

            // 绝对距离
            $('#JQ_enterMileage').blur(function(){
                getGISID($('#JQ_x'),$('#JQ_y'));
            });

            //getMileage('a0a237edbd014841b2b3b0db4808566f', 74364.1919999998, 71739.63399999961);

        });

    </script>
</body>
</html>
